import React, { memo, useEffect } from 'react'

import { NavLink } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'

import { dicoverMenu } from '@/common/local-data'

import { TopDicover, TopMenuWrap } from './style'

export default memo(function WYDiscover(props) {

  useEffect(() => {

  }, [])

  const { route } = props

  return (
    <TopDicover>
      <div className="top">
        <TopMenuWrap className="wrap-v1">
          {
            dicoverMenu.map((item, index) => {
              return (
                <div className="item" key={item.title}>
                  <NavLink to={item.link}>{item.title}</NavLink>
                </div>
              )
            })
          }
        </TopMenuWrap>
      </div>
      {renderRoutes(route.routes)}
    </TopDicover>
  )
})